<template>
  <div class="wrap">
    <div class="box">
      <div class="item1" v-for="item in img" :key="item.id">
        <img :src="item.imgersssd" alt="" />
        <div class="text">
          {{ item.txt }}
        </div>
        <div class="baoyou">包邮包税</div>
        <div class="jiage">
          <p>{{ item.price }}</p>
          <p>{{ item.xs }}</p>
        </div>
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      img: [
        {
          id: "01",
          imgersssd:
            "http://pic1.ymatou.com/G03/shangou/M06/FE/6D/CgzUH1_-oLyAU06yAAS9-3uExEs681_1_1_n_w_lb.jpg",
          price: "￥990.00",
          xs: "看相似",
          txt: "Amortals尔木萄唇釉水光镜面学生款平价丝绒雾面口红小众品牌正品",
        },
        {
          id: "02",
          imgersssd:
            "http://pic1.ymatou.com/G03/shangou/M06/FE/6D/CgzUH1_-oLyAU06yAAS9-3uExEs681_1_1_n_w_lb.jpg",
          price: "￥990.00",
          xs: "看相似",
          txt: "Amortals尔木萄唇釉水光镜面学生款平价丝绒雾面口红小众品牌正品",
        },
        {
          id: "03",
          imgersssd:
            "http://pic1.ymatou.com/G03/shangou/M06/FE/6D/CgzUH1_-oLyAU06yAAS9-3uExEs681_1_1_n_w_lb.jpg",
          price: "￥990.00",
          xs: "看相似",
          txt: "Amortals尔木萄唇釉水光镜面学生款平价丝绒雾面口红小众品牌正品",
        },
        {
          id: "04",
          imgersssd:
            "http://pic1.ymatou.com/G03/shangou/M06/FE/6D/CgzUH1_-oLyAU06yAAS9-3uExEs681_1_1_n_w_lb.jpg",
          price: "￥990.00",
          xs: "看相似",
          txt: "Amortals尔木萄唇釉水光镜面学生款平价丝绒雾面口红小众品牌正品",
        },
      ],
    };
  },
};
</script>
<style scoped>
.box {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.baoyou {
  padding: 2px;
  border-radius: 10px;
  font-size: 12px;
  width: 100px;
  color: red;
  border: 1px solid red;
}
img {
  width: 300px;
  height: 300px;
  border-radius: 30px;
}
.item1 {
  width: 300px;
  height: 500px;
  background-color: white;
  border-radius: 20px;
  margin-top: 30px;
}
.text {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 300px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.jiage {
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}
.bm_txt {
  font-size: 12px;
  color: darkgray;
  display: flex;
  justify-content: space-between;
}
</style>